Vue.component("mktips",{
    // props:{
    //   content:{
    //       type:String,
    //       required:true
    //   }
    // }
    // ,
    template:`
    <div class="mktips">
   <slot> </slot>
    </div>
    
    `,mounted(){
    console.log(this.$parent)
}
})
Vue.component("mktips2",{
data(){
    return {uname:'zhn',age:20}
}
    ,template:`
<fieldset> 



<legend>test2</legend>
<h1>navBar</h1>
<slot name="navbar"> </slot>
<h1>main</h1>
<slot name="main" :a="uname" :b="age"> </slot>
<h1>tabBar</h1>
<slot name="tabbar"> </slot>
<hr>
<slot> </slot>





</fieldset>



`,
mounted (){
   
}



})
Vue.component('maketable',{
  props:{
      goto:{type:Array,
      required:true},
      goto2:{
          type:Array,
          required:true
      }
  }
    ,template:`
  <table border="1" cellspacing="0" width="400px" text-align="center">
<thead>  
<tr >
<th v-for="item in goto">
{{item.title}}
</th>
</tr>


</thead>

<tbody>
    <tr v-for="item1 in goto2">
 <td v-for="(item,i) in goto">
 <template v-if="item.render">
 {{item.render(item1)}}
 </template>
 <template v-else="item.render"> 
 {{item1[item.key]}}
 </template>

 
 </td>
    </tr>
</tbody>


  
  
 
</table>

  `
,
methods:{
    showFn(){
        console.log(this.manTh2)
    }
}


})









Vue.component('loading2',{
    props:{status:Boolean}
    ,template:`
<div>
<button @click="$emit('loading2',true)">显示loading</button>
    <div v-if="status" class="loading2">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>
</div>
    `,
    methods:{
        lookFn(){
            console.log(this.status)
        }
    }
    

})

















Vue.component('page',{
    props:{
        total:Number,
        size:Number
    }
    ,template:`
    <div class=".page" >
     <span class="go" v-for="(item,i) in pagenum" @click="conFn(item)">{{item}}</span>
    
    
    
 </div>   
    `,
    data(){
        return {
            pagenum:Math.ceil(this.total/this.size)
        }
    },
    methods:{
        testFn(){
            console.log(this.total,this.size,this.pagenum,typeof this.pagenum)
        },
        conFn(k){
            alert(`第（${k}）页`)
        }

    }

})



Vue.component('tip',{
    props:{status:Boolean}
    ,template:`
   <div class="tip" v-if="status">
   <div class="all">
    <div class="top"></div>
    <div class="center"></div>
    <div class="bottom"><button @click="$emit('close',false)">确定</button><button @click="$emit('close2',false)">取消</button></div>
    </div>
    </div>
    `
})








Vue.component('loading',
{
    
    data(){
        return{
          loadingState3:true
        }
    },
    template:`
<div id="loading" v-if="loadingState3" @click=changeFn>loading.... </div>


`,

methods:{
    changeFn(){
        this.loadingState3=false
    }
}


})










Vue.component('test2',{
    props:['title']
    ,template:`
<fieldset><span @click="$emit('click-left')">&lt;
</span>
<span>{{title}}</span>
<span @click="$emit('click-right')">搜索🔍</span>
</fieldset>`,
methods:{
leftFn(){
    alert('left')
}
}
})

Vue.component('test3',{
    props:{
        title:{
            type:String,
            required:true
        },
       type:{
           type:String,
           required:true
       }
    
    
    
    },
        template:`
        <button :class="[type,'van-button ','van-button--normal']"> {{title}} </button>
        `
 
})







Vue.component('test',{
    props:{status:{type:Boolean,
    default:true}
   }
    ,template:`
    <fieldset> 
    用户名：<input type="text" v-model="formData.account"></br>
    </br>
    密码：<input type="password" v-model="formData.password">
    <button  v-if="status" @click="$emit('submit',formData)">  提交按钮 </button>
    </fieldset>  
    `,
    data(){
        return {
            formData:{
                account:'',
                password:''
            }
        }
    },
    methods:{
        submitFn(){
            
        }
    }
})